<template>
  <div class="section-wrap addPlan">
    <!-- 头部 -->
    <div class="headerBox">
      <div class="header">
        <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
        新增检查计划
      </div>
    </div>
    <div class="form-section" style="margin-top: 40px;margin-bottom:0;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被检查单位</label><i class="iconfont icon-required"></i>
        </div>
        <div class="input_div" @click="classValue = true">
          <input type="text"
                 placeholder="请选择"
                 :disabled="isDisabled" v-model="params.projectName" style="font-size:16px">
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查类型</label><i class="iconfont icon-required"></i>
        </div>
        <div class="input_div">
          <input type="text" v-model="params.checkType" placeholder="请选择" disabled>
          <!-- <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon> -->
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查时间</label>
          <i class="iconfont icon-required"></i>
        </div>
        <group>
          <datetime placeholder="请选择" v-model="params.checkDate" format="YYYY-MM-DD" style="font-size:16px"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查组长</label>
          <i class="iconfont icon-required"></i>
        </div>
        <div class="input_div" @click="getGroup(1)">
          <input type="text"
                 v-model="params.teamLeader"
                 placeholder="请选择">
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <!-- <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查区域</label>
        </div>
        <div class="input_div" @click="check(1)">
          <input type="text"
                 placeholder="请输入"
                 v-model="params.checkArea">
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查内容</label>
        </div>
        <div class="input_div" @click="check(2)">
          <input type="text"
                 placeholder="请输入"
                 v-model="params.checkContent"
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查重点</label>
        </div>
        <div class="input_div" @click="check(3)">
          <input type="text"
                 placeholder="请选择"
                 v-model="params.checkPoint"
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div> -->
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查表</label>
          <!-- <i class="iconfont icon-required"></i> -->
        </div>
        <div class="input_div" @click="classValue3=true">
          <input type="text"
                 placeholder="请选择"
                 v-model="params.checkClassName" disabled
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon>
        </div>
      </div>
      <div class="info_div3">
        <p>检查人员及分工</p>
        <span class="add_team" @click="add">新增</span>
      </div>
      <div class="member_div">
        <ul class="member_list">
          <li  v-for="(list,index) in lis" v-bind:key="list.id"  style="position: relative">
            <v-touch v-on:swipeleft="onSwipeLeft(index)" tag="div" class="v-touch">
              <div class="form-item form-item-style1">
                <div class="label-title">
                  <label>成员：</label>
                </div>
                <div class="input_div" @click="getGroup(2,index)">
                  <input type="text"
                         placeholder="请选择"
                         :disabled="isDisabled" v-model="list.divisionProsonName">
                  <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
                </div>
              </div>
              <div class="form-item form-item-style1" style="border-bottom: none;">
                <div class="label-title">
                  <label>分工（考核项）：</label>
                </div>
                <div class="input_div" @click="getShare(index)">
                  <input type="text"
                         placeholder="请选择"
                         :disabled="isDisabled" v-model="list.standardNameList">
                  <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
                </div>
              </div>
              <div style="height: 116px;width: 100px;position: absolute;top:0;right: 0;cursor: pointer" v-if="openRightIndex==index">
                <p style="width:50px;text-align:center;height: 116px;line-height:116px;background-color: red;color: #fff;float: left" @click="del(index)">删除</p>
                <p style="width:50px;text-align:center;height: 116px;line-height:116px;background-color: #ccc;color: #fff;float: right" @click="openRightIndex=-1">取消</p>
              </div>
            </v-touch>
          </li>
        </ul>
      </div>
      <div class="btns_div">
        <a class="submitBtn" @click="save(0)">提 交</a>
        <a class="cancelBtn" @click="$router.push('./safeCheckIndex')">取 消</a>
      </div>
    </div>
    <div v-transfer-dom>
      <!-- 被检查单位 -->
      <popup v-model="classValue" width="100%">
        <ztree
          :data="data"
          @nodeClick="nodeClick"
          :name="'departName'"
        ></ztree>
      </popup>
      <!-- 检查组长 -->
      <popup v-model="classValue1" width="100%" >
        <select-depart :data="data2" @selectUser='selectUser'></select-depart>
      </popup>
      <!-- 检查 区域 和 内容 和 重点  -->
      <popup v-model="classValue2" width="100%" height="300px">
        <group>
          <x-textarea :max="200" :rows="7" name="description" placeholder="请输入" v-model="checkArea" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="ent">确定</span> <em @click="clear">清空</em></p>
      </popup>
      <!-- 检查表 -->
      <popup v-model="classValue3" width="100%" >
        <ul class="popList">
          <li :class="ind==index ? 'active' : ''" v-for="(item,index) in checkData" :key="index" @click="selectLi(index,item)">
            <p>{{item.type}}<img src="../../../static/images/list_checked.png"></p>
          </li>
        </ul>
      </popup>
      <!-- 分工 -->
      <popup v-model="flag" width="100%" >
        <div style="background: white" id="tree">
          <el-tree
            @node-click="handleNodeClick"
            :data="checkData1"
            ref="tree"
            :props="def"
          ></el-tree>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
  import ztree from "@commonComponents/tree"
  import selectDepart from "@commonComponents/selectDepartUser/selectUser";
  import {XHeader, Tabbar, TabbarItem, Group, Cell, TransferDom, Popup} from 'vux';
  export default {
    data() {
      return {
        groupIndex:0,
        entIndex:1,
        checkArea:'',
        openRightIndex:-1,
        ind:0,
        ind2:0,
        num:0,
        checkedList: [],
        def:{
          children:'data',
          label:"jcSubjectContent",
        },
        lis: [],
        listIndex:'',
        index: '',
        dataList: [],
        isDisabled: true, // 是否禁止输入
        flag:false,
        classValue: false,
        classValue1: false,
        classValue2: false,
        classValue3: false,
        classValue4: false,
        flag: false,
        params: {
          checkDept: "",
          checkDepartName: "",
          checkDepartId: "",
          checkType: "",
          status: 0,
          checkGroupLeaderId: "",
          checkGroupLeaderName: "",
          classifyTwoName: "",
          checkDate: "",
          receiverId: "",
          checkArea: "",
          classifyOneId: this.$store.state.tableTypeName.id,
          classifyOneName: this.$store.state.tableTypeName.quantizeName,
          divisionList: [],
        },
        data: [],
        data2: [],
        data3: [],
        checkData:[],
        checkData1:[],
        ids:[],
        checkIdea:'',
        params2:{
          name:'',
          jcType:'',
          skipCount:0,
          maxResultCount:10000
        }
      }
    },
    components: {
      ztree, Popup, selectDepart
    },
    directives: {
      TransferDom
    },
    created() {
      this.params.checkClassName = "无"
      this.examinedUnits()
      this.getList()
      this.params.checkType=this.$route.query.name

    },
    watch:{
      checkArea(val){
        if (val==''){
          this.checkArea=''
        }else {
          this.checkArea=val.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')
        }

      },
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      add() {//增加按钮
        let cope = {}
        this.lis.push(cope);
      },
      del(index){
        this.openRightIndex=-1
        this.lis.splice(index,1)
      },
      save(num) {//保存
        if (this.params.projectName == null || this.params.projectName == '') {
          this.$vux.toast.text("请选择被检查单位")
          return;
        }
        if (this.params.teamLeader == null || this.params.teamLeader == '') {
          this.$vux.toast.text("请选择检查组长")
          return;
        }
        if (num == 0) {
          this.params.status = 1
        } else {
          this.params.status = 0
        }
        var a=[]
        a.push(this.$route.query.name2)
        a.push(this.params.checkType)
        this.params.checkType=a
        this.params.isPlan=1
        this.params.divisionList = this.lis
        // this.params.divisionList.forEach(divItem => {
        //   divItem.planId = this.params.id
        // })
        
        console.log(JSON.stringify(this.params))
        this.params.checkDate = this.params.checkDate + " 00:00:00";
        if (this.params.id == null || this.params.id == '') {
          this.$axiosAjax.creatPlan(this.params).then((res) => {
            if (res.data.success == true) {
              this.$vux.toast.text("操作成功")
              this.$router.push("./safeCheckIndex")
            }
          }).catch(
            (err) => {

            }
          )
        } else {
          this.$axiosAjax.assessmentUpdate(this.params).then((res) => {
            if (res.data.success == true) {
              this.$vux.toast.text("操作成功")
              // this.$router.push("./quanPlan")
              this.$router.go(-1)
            }
          }).catch(
            (err) => {

            }
          )
        }

      },
      onSwipeLeft(index){
        this.openRightIndex=index
      },
      // 被检查单位
      examinedUnits() {
        this.$axiosAjax.examinedUnits({parentId: this.$store.state.departId}).then((res) => {
          if (res.data.success == true) {
            this.data = res.data.result
          }
        }).catch((err) => {
            console.log(err)
          }
        )
      },
      // 点击单位树
      nodeClick(item){
        if (item.departType == 6 || item.departType == 7 || item.departType == 8) {
          this.params.projectName=item.departName
          this.params.projectId=item.id
          this.params.charge=item.charge
        } else {
          this.$vux.toast.text("只能选择项目部")
        }
        this.classValue=false
        this.params.projectType = item.projectType
      },
      // 获取组长
      getGroup (num,index) {
        this.groupIndex=num
        this.listIndex=index
        this.classValue1 = true;
        this.$axiosAjax.getDivision({classifyId: this.params.classifyTwoId}).then((res) => {
          if (res.data.success == true) {
            this.data2 = res.data.result
          }
        }).catch((err) => {
            console.log(err)
          }
        )
      },
      // 点击组长  或者成员
      selectUser(data) {
        if (this.groupIndex==1){
          this.params.teamLeader = data.userName
          this.params.teamLeaderId = data.id
        } else if (this.groupIndex==2){
          this.lis[this.listIndex].divisionProsonId=data.id
          this.lis[this.listIndex].divisionProsonName=data.userName
        }
        this.classValue1 = false
      },
      // 检查区域1 和 检查内容2 和 检查重点3
      check (index){
        this.classValue2=true
        this.entIndex=index
        if (index==1){
          if (this.params.checkArea){
            this.checkArea=this.params.checkArea
          } else {
            this.checkArea=''
          }

        }else if (index==2){
          if (this.params.receivrtName){
            this.checkArea=this.params.checkContent
          } else {
            this.checkArea=''
          }
        }else if (index==3){
          if (this.params.receivrtName){
            this.checkArea=this.params.checkPoint
          } else {
            this.checkArea=''
          }
        }
      },
      ent(){
        this.classValue2=false
        if(this.entIndex==1){
          if (this.checkArea){
            this.params.checkArea=this.checkArea
          } else {
            this.params.checkArea=''
          }
        } else if(this.entIndex==2){
          if (this.checkArea){
            this.params.checkContent	=this.checkArea
          } else {
            this.params.checkContent=''
          }
        }else if(this.entIndex==3){
          if (this.checkArea){
            this.params.checkPoint=this.checkArea
          } else {
            this.params.checkPoint=''
          }
        }
      },
      clear(){
        this.checkArea=''
      },
      // 检查表
      getList(){
        this.params2.jcType=this.$route.query.name
        this.$axiosAjax.getIndex(this.params2).then((res) => {
          if (res.data.success == true) {
            var list =res.data.result.items
            var arr =[]
            for (var k of list){
              var obj ={}
              obj.type=k.jcName
              obj.id=k.id
              arr.push(obj)
            }
            arr.unshift({
              type:'无',
              id:'无'
            })
            this.checkData=arr
          }
        }).catch((err) => {
            console.log(err)
          }
        )
      },
      selectLi(index,item) {
        this.lis = [{}]
        this.ind=index
        this.classValue3=false
        this.params.checkClassName=item.type
        this.params.checkClassId=item.id
        this.params2.name=item.type
        this.$axiosAjax.getIndex(this.params2).then((res) => {
          if (res.data.success == true) {
            var list =res.data.result.items
            var arr =[]
            for (var k of list){
              for(var j of k.safeJcSubject){
                var obj ={}
                obj.jcSubjectContent=j.jcSubjectName
                obj.id=j.id
                obj.level=0
                obj.data=j.safeJcSubjectDetail
                arr.push(obj)
              }
            }
            this.data3=arr
          }
          console.log(this.data3)
        }).catch((err) => {
            console.log(err)
          }
        )
      },
      handleNodeClick(data, e){
          if(data.type==1){
            this.$vux.toast.text("已被分配，不能重复选择")
            return;
          }else{
            this.flag=false
            if(data.level==0){
              this.lis[this.listIndex].standardIdList=data.id
              this.lis[this.listIndex].standardNameList=data.jcSubjectContent
              this.lis[this.listIndex].contentList=data.data
              data.data.forEach(item => {
                item['checkContent'] = item.jcSubjectContent
                item.id = item.jcSubjecId
              })
              this.lis[this.listIndex].contentList=data.data
            }else{
              this.lis[this.listIndex].standardIdList=e.parent.data.id
              this.lis[this.listIndex].standardNameList=e.parent.data.jcSubjectContent
              e.parent.data.data.forEach(item => {
                item['checkContent'] = item.jcSubjectContent
                item.id = item.jcSubjecId
              })
              this.lis[this.listIndex].contentList=e.parent.data.data
              console.log(this.lis)
            }
          }
      },
      getShare(index){
        var standardIdList= this.lis[index].standardIdList
        this.checkData1=this.data3
        this.listIndex=index
        this.flag=true
        var arr=[];
        var objs=this.getChecked()
        console.log(objs)
        if(objs.length!=0){
          this.data3.forEach(function(val,key){
             if(objs.indexOf(val.id)>-1){
               val['type']=1
             }
             if(objs.indexOf(val.id)>-1 && standardIdList==val.id){
               val['type']=0
             }
            })
          var arr=this.data3.filter(val => {return val.type!=1})
          this.checkData1=arr
        }
      },
      getChecked(){
        var list=[]
        this.lis.forEach((item,i)=>{
          list.push(item.standardIdList)
        })
        return list;
      },
      selectLi2(index,item) {
        this.ind2=index
        this.params.receivrtName5=item.type
        this.classValue4=false
      }
    },
  }
</script>
<style lang="less" scoped>
  .must_span {
    color: #ff0000;
  }
  #tree {
    .el-tree-node__label{
      display:block;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;}
  }
  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 17px;
      }
    }
  }
  .info_div3 {
    height: 55px;
    line-height: 45px;
    padding: 0 20px;
    border-top: 10px solid #ebeef2;
    p {
      float: left;
      color: #469b7a;
      font-size: 16px;
      font-weight: bold;
    }
    .add_team {
      float: right;
      display: block;
      font-size: 14px;
      background: url("/static/images/add_new_icon.png") no-repeat right center;
      background-size: 16px 16px;
      padding-right: 20px;
      color: #999;
    }
  }
  .member_div {
    .member_list {
      li {
        border-top: 5px solid #ebeef2;
      }
    }
  }
  .btns_div {
    width: 100%;
    background: #ebeef2;
    padding: 30px 20px 55px;
    justify-content: space-between;
    display: flex;
    a {
      height: 40px;
      border-radius: 20px;
      display: inline-block;
      width: 140px;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
    .submitBtn {
      background: #469b7a;
    }
    .cancelBtn {
      background: #f59b79;
    }
  }
  .addPlan_select {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    z-index: 10;
    .planSel_list {
      width: 60%;
      margin: 0 auto;
      padding-top: 150px;
      li {
        border-radius: 10px;
        height: 57px;
        line-height: 57px;
        text-align: center;
        background: #fff;
        margin-bottom: 6px;
        color: #469b7a;
        font-size: 16px;
      }
    }
  }
  .vux-cell-placeholder{
    font-size: 14px;
    margin-right: 20px!important;
  }
  .addPlan .input_div input{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .transfer_p{
    padding: 10px 20px;
    height: 30px;
    span,em{
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
    }
    span{
      float: left;
      background-color:#2abf72;
    }
    em{
      float: right;
      background-color: #ceaa6c;
    }
  }
  .weui-cell__bd{
    height: 200px!important;
  }
  #tt {
    background-color: #eee;
    height: 220px;
    .weui-cell__bd .weui-textarea{
      height: 180px!important;
      background-color: pink;
    }
  }
  .weui-cell_access .weui-cell__ft{
    padding-right: 20px;
  }
  .popList {
    min-height: 200px;
    overflow-y: scroll;
    li {
      height: 40px;
      border-bottom: 1px solid #eee;
      background-color: #fff;
      position: relative;
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        font-size: 14px;
        text-align: center;
        img {
          height: 14px;
          width: 14px;
          margin-left: 10px;
          vertical-align: middle;
          position: relative;
          top: -1px;
          opacity: 0;
        }
      }
    }
    li.active {
      p {
        color: #469b7a;
      }
      img {
        opacity: 1;
      }
    }
  }
  .v-touch {
    touch-action: pan-y !important;
  }
</style>
